var btn = document.getElementsByClassName('btn')[0];
var spans = document.getElementsByTagName('span');
var spanArr = Array.prototype.slice.call(spans);
var card = document.getElementsByClassName('card')[0];
var oReturn = document.getElementsByClassName('return')[0];
var ul = document.getElementsByTagName('ul')[0];
var activeDom;

var angle = 0;
btn.onclick = function () {
  angle += 180;
  this.style.transform = 'rotate('+ angle +'deg)';
  spanArr.forEach(function (ele,index){
    var s = ele.className === 'state1' ? 'state2':'state1';
    ele.className = s;
    // if(ele.className == 'state1'){
    //     ele.className = 'state2';
    // }else{
    //   ele.className = 'state1';
    // }
  })
};
spanArr.forEach(function (ele,index) {
  ele.onclick = function () {
    card.style.left = '0';
    activeDom = ele;
  }
});
oReturn.onclick = function () {
  card.style.left = '100%';
};
ul.addEventListener('click',function (e) {
  var target = e.target;
  if (target.nodeName !== 'LI')return ;

  var val =target.innerText;

  // spanArr[1].innerText = val;
  activeDom.innerText = val;
  oReturn.onclick();
});
